<template>
  <div class="goods-container">
    <div class="goods-group">
      <router-link tag="div" :to="'/home/goodsdetail/'+item.id" class="goods-item" v-for="(item) in goodslist" :key="item.id">
        <img :src="item.img_url" />
        <h3 class="title">{{ item.title }}</h3>
        <div class="info">
          <div class="price">
            <span class="new">¥ {{ item.sell_price }}</span>
            <span class="old">¥ {{ item.market_price }}</span>
          </div>
          <div class="sell">
            <span>热买中</span>
            <span>剩{{ item.stock_quantity }}件</span>
          </div>
        </div>
      </router-link>
      <div class="goods-item" v-for="(item, index) in goodslist.length%2" :key="index" style="opacity: 0"></div>
      <mt-button type='danger' size='large' style="margin-top:10px" @click='getMore'>加载更多</mt-button>
    </div>
  </div>
</template>

<script>
export default {
  created() {
    // 发送请求
    this.__getGoodsListByPage();
  },
  data() {
    return {
      page: 1,
      goodslist: [],
      isLoaded: false // 节流阀
    };
  },
  methods: {
    // ============ 发送网络请求 ===============
    async __getGoodsListByPage() {
      const { data: res } = await this.$http.get(
        `getgoods?pageindex=${this.page}`
      );
      if(res.message.length === 0) {
        this.isLoaded = true
      }
      if (res.status !== 0) return;
      this.goodslist = this.goodslist.concat(res.message);
    },
    // =========== 事件监听 ===================
    getMore() {
      if(this.isLoaded) return
      this.page++
      this.__getGoodsListByPage()
    }
  }
};
</script>

<style lang='scss' scoped>
.goods-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;

  .goods-item {
    padding: 2px;
    width: 48%;
    margin-top: 7px;
    border: 1px solid #ccc;
    box-shadow: 0 0 7px #ccc;
    .title {
      margin: 10px 0 0 0;
      height: 50px;
      font-size: 15px;
      line-height: 24px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    img {
      width: 100%;
    }
    .info {
      background-color: #eee;
      padding: 5px 2px;
    }
    .price {
      display: flex;
      padding: 5px 0;
      .new {
        font-size: 20px;
        color: red;
        font-weight: 700;
        margin-right: 10px;
      }
      .old {
        font-size: 15px;
        color: #ccc;
        text-decoration: line-through;
      }
    }
    .sell {
      display: flex;
      justify-content: space-between;
      font-size: 14px;
      color: #999;
    }
  }
}
</style>